<script>

import MainLayout from './layout/index.vue'

import { appSettingStore } from './store/appSetting'
import { getDarkColor, getLightColor } from './utils/color'

export default {
  components: { MainLayout },
  data() {
    return {
      appSetting: null,
      loading: true
    }
  },
  methods: {
    initApp() {
      this.appSetting = appSettingStore()
      this.initLocale()
      this.initTheme()
      this.loading = false
    },
    // 初始化语言
    initLocale() {
      switch (this.appSetting.locale || navigator.language) {
        case 'en-US':
          this.$i18n.locale = 'en-US'
          break
        default:
          this.$i18n.locale = '简体中文'
          break
      }
    },
    // 初始化主题
    initTheme() {
      document.documentElement.style.setProperty('--el-color-primary', this.appSetting.themeColor)
      if (this.appSetting.dark) {
        document.documentElement.classList.add('dark')
      }
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(this.appSetting.themeColor, i / 10)}`)
      }
      for (let i = 1; i <= 9; i++) {
        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(this.appSetting.themeColor, i / 10)}`)
      }
    }
  },
  mounted() {
    this.initApp()
  }
}


</script>

<template>
  <main-layout v-if="!loading"></main-layout>
</template>

<style lang="less">
@import 'assets/css/styles.less';
</style>
